Transition Between Locations on the Globe
In this tutorial, you will learn to smoothly fly between two locations on the Cesium for Unreal globe using Unreal Engine Blueprints.
A transition between Sydney and Melbourne, Australia.
You’ll learn how to:
- Work with cartographic coordinates in Unreal Engine
- Use the CesiumFlyTo component and Blueprint to smoothly fly between locations on the globe
- Customize the flight path with curves
- Create viewpoints to mark locations and anchor them to the globe
Blueprints is the visual scripting system inside of Unreal Engine based on the concept of a node-based interface. Although it helps to have some knowledge of coding, Blueprints make it easier for non-programmers to add logic to their application.
Start with the 01_CesiumWorld level in the Cesium for Unreal Samples, or create a new level following the instructions in the Quickstart. Add a global base tileset, such as Cesium World Terrain + Bing Maps Aerial imagery or Google Photorealistic 3D Tiles.
1Select
the CesiumGeoreference actor in the
World Outliner.
In
the Details panel, look for
the Origin Latitude, Origin
Longitude, and Origin
Height parameters. Set them to the values of the
source location. For example, to start in Sydney, Australia, we can type
in the following coordinates:
Origin
Latitude = -33.871799
Origin
Longitude = 151.206696
Origin
Height = 3000.0
2Be sure that Enable World Bounds Checks is OFF in the World Settings, because we will be covering very large distances with our flights.
1If you do not currently have a DynamicPawn in the scene, you'll need to add one. Use the Cesium panel to add a Dynamic Pawn. To focus on the pawn, double-click its label in the Outliner.
The camera flights we will set up in this tutorial use the CesiumFlyTo component, which is attached to the DynamicPawn by default. You can add this component on any Actor or Pawn to fly it around the globe in the same way.
2Frame your starting view by adjusting the position and rotation of the DynamicPawn using the translation and rotation gizmos. Since the pawn has a camera attached to it, you'll see a preview of the scene from the DynamicPawn's view in the bottom right corner of the editor.
Now in Play mode, you will be able to control the DynamicPawn with the mouse and WASD keys.
A Player is the entity that you will control in Play mode. You can move around the scene and perform other tasks using the Player. You can also switch between different Players if there are multiple ones in the scene.
In this step, you are going to create a Blueprint function that allows you to press a key on your keyboard and trigger a flight between two locations on the globe.
1Open the Level Blueprint by clicking the Blueprint button on the toolbar at the top of the main Unreal Engine Editor window and choosing Open Level Blueprint.
2From the Outliner, select the DynamicPawn actor. Drag-and-drop the DynamicPawn into the Event Graph in the Level Blueprint. It may help to make the Level Blueprint window smaller so that you can
3Drag a connection from the DynamicPawn node. In the menu that appears, search for "fly" and select the Fly to Location Longitude Latitude Height (FlyTo) function. Unreal adds an intermediate node to get the CesiumFlyTo component from the DynamicPawn.
4If you are interested in how the function works, you can hover the mouse over the function node to read the documentation. One of the parameters of the function is Can Interrupt By Moving, which is the last pin on the function node. If you would like to be able to move the pawn mid-flight with the standard WASD movement keys, you can tick the checkbox next to this parameter.
5Drag a connection from the Longitude Latitude Height Destination pin on the new node and select Make Vector. Enter the values for the longitude, latitude, and height of the destination into the X, Y, and Z variables respectively. In this tutorial, we will fly to Melbourne, Australia, with longitude = 144.9631, latitude = -37.8136, and height = 2000. Be careful: Longitude is first (X)!
6To trigger the transition, add a Keyboard Event and connect its output pin to the input pin of the Fly to Location Longitude Latitude Height node. The example below is using the F key.
7Compile the newly added nodes with the Compile button at the top left corner of the editor.
To check whether you have set up everything correctly, head back to the main editor. Press Play at the top toolbar. The initial view should be the same view you saw earlier through the Dynamic Pawn’s camera preview. Press the F key (or whichever key you chose to use) on the keyboard to see the flight in action.
The camera will transition between Sydney and Melbourne over the course of five seconds. In the next step, you will set some variables to customize the speed and height of the DynamicPawn throughout the transition.
In this step, we will adjust some variables of the CesiumFlyTo component to customize how the DynamicPawn transitions to the destination.
CesiumFlyTo's flight settings
In the DynamicPawn's Details panel, click the component named FlyTo. You'll see several parameters that impact the flight behavior.
The Duration parameter determines how many seconds the flight will take from beginning to end. The higher the value, the slower the pawn will move.
The Curves are UCurveFloat assets that are used in the Fly to Location functions when computing the pawn's path from the source location to destination. Cesium for Unreal comes with preset curves that the CesiumFlyTo component uses to fly between locations. Each curve is explained below, including the behaviors of the default curves.
Height Percentage Curve
The Height Percentage Curve controls how the pawn's height changes throughout the duration of the flight. The X axis represents the time during the flight. The Y axis represents the pawn's height, where 0 is the pawn's starting and ending height, and 1 is the maximum height (determined by the Maximum Height by Distance curve). This curve must be kept in the 0 to 1 range on both axes.
The default curve starts and ends at 0, which is recommended to make sure the transitions at the beginning and end of the flight are seamless. With the default curve, the pawn will spend most of the flight at higher altitudes.
Progress Curve
The Progress Curve controls the pawn's speed throughout the flight. The X axis represents the time during the flight. The Y axis represents the location along the flight path. This curve must be kept in the 0 to 1 range on both axes.
The default curve is s-shaped, so that the pawn will slow down at the beginning and end of the flight.
Maximum Height by Distance Curve
The Maximum Height by Distance Curve determines the relationship between the distance to travel and the maximum flight height. The X axis represents the distance between the start and end location, and the Y axis represents the maximum height. Distances in this graph are in meters. Feel free to adjust the maximum X and Y axes to suit your needs.
This curve ensures that the pawn will fly at a reasonable height for the distance that it is traveling. It might look odd if the pawn flew out to space in order to move ten kilometers.
The default curve is linear. The maximum X value is 12000000 units/12000 kilometers. The maximum Y value is 2000000 units/2000 kilometers.
1Right-click in
the Content Browser and create a new
Curve asset (Miscellaneous -> Curve). A Pick
Curve Class window will appear. Choose
CurveFloat, then press the Select
button to create the asset.
This curve will be used to
replace the Height Percentage Curve. Name your new
curve "Curve_MyHeightPercentage".
2Double-click on the curve in the Content Browser to open the Curve Editor window. Add three key points to the graph (Right click -> Add Key). Set the first point to (0,0). Set the second point to (0.5,1). Set the last point to (1,0).
3Use the Curve Editor tools to create an interesting curve shape. The following tips may help you in creating your curve.
- You can set the exact coordinates of a point by clicking on the point, then using the text fields in the top bar of the curve editor.
- Different interpolation settings are available for the curve points on the right side of the top bar.
- Make sure your curve doesn't exceed the bounds between (0,0) and (1,1) on the graph.
The example curve in this tutorial uses the cubic interpolation setting for each point to achieve a smooth line. Notice how it differs from the default Fly to Altitude Profile curve.
Once you've finished creating your curve, save the curve asset and close the Curve Editor window.
4In the Details panel, set the FlyTo component's Height Percentage Curve to your new curve asset.
5Set the Duration parameter to 10 seconds.
6Save your level, then press Play. Press the F key again to activate the flight. Since you changed the Duration, the camera will move more slowly. The pawn's height will follow your custom curve.
7The next section will cover a different way of flying between locations. You may wish to reset DynamicPawn's settings back to default before continuing.
It’s not always convenient to type in starting and ending WGS84 coordinates to specify a flight. As an alternative, actors can be placed in a scene to serve as "geo-markers”. These markers can be placed at any geographic location, and their position can later be used as the Dynamic Pawn's flight destination.
Any actor on the globe can be used as a geo-marker. In this tutorial, you'll learn how to create a simple geo-marker using a cube and a Globe Anchor component.
1First, pick a location for your geo-marker. You can change the Georeference Origin to your new location, or fly there with the editor camera and press the Place Georeference Here button on the CesiumGeoreference actor. The geo-marker in this tutorial will be placed in Christchurch, New Zealand at latitude -43.539723, longitude 172.636686, and height 2000.
2Add a
Cube to the scene from the Place
Actors panel. Rename the cube to "Marker".
Rotate
the cube to frame a view of the location. To set up the view more
precisely, you can right-click on the cube and select Pilot
'Marker' to "see" through its perspective.
3Set the marker’s mobility to Movable.
5Return to the Level Blueprint. In the Event Graph, add a new Keyboard Event event for the "G" key.
6As before, add
a reference to the DynamicPawn. This time, drag
off the DynamicPawn and create a Fly
to Location Earth Centered Earth Fixed node.
Connect the execution pin from the “G” keyboard event to
the Fly To Location ECEF function.
Fly to Location Earth Centered Earth Fixed works just like Fly to Location Longitude Latitude Height, but it uses the Earth-centered, Earth-fixed (ECEF) coordinate system instead of the longitude/latitude/height geographic coordinate system. Cesium for Unreal includes functions for both of these coordinate systems. Feel free to use whichever coordinate system you prefer in your applications.
7Drag in the Marker and the default CesiumGeoreference from the Outliner into the Level Blueprint.
8Drag a connector from the Marker and create a Get Component by Class node. Change the node's Component Class property to Cesium Globe Anchor.
9Drag a connector from the Get Component by Class node's Return Value pin and create two new nodes: Get Earth Centered Earth Fixed Position and Get East South Up Rotation. Drag a connector from the Earth Centered Earth Fixed Position pin to the Earth Centered Earth Fixed Destination pin on the Fly to Location Earth Centered Earth Fixed node.
10Add a ToRotator node by dragging a connector out from the East South Up Rotation pin. Then drag a connector from the ToRotator and create a Break Rotator node. This allows access to the individual roll, pitch, and yaw components of the rotation.
1Save and
compile the level blueprint. Hit Play and
press G to try it out.
To be able to
cancel an in-progress flight by moving the pawn manually, check
the Can Interrupt By Moving box.
The DynamicPawn flies from Denver to Boston.
You have completed the Cesium for Unreal Getting Started tutorials, but there’s still a lot to learn about Cesium for Unreal.
Learn how to add a physics-based controller to levels with 3D Tilesets in the Using Custom Controllers tutorial.
Try the Build a Flight Tracker with Cesium for Unreal tutorial.
If you’re interested in building out your world, check out Using a Geospatially Accurate Sun, Lighting and Rendering Scenes, or Placing Foliage on Cesium Tilesets.